<template>
	<view class="Jy_add_address_page">
		<view class="Jy_add_address_container">
			<view class="input_group">
				<view class="left_text-box">
					<text>收货人</text>
				</view>
				<view class="right-input-box">
					<input type="text" :focus="focus.realName" placeholder="名字" v-model="address.realName" maxlength="10">
				</view>
			</view>
			<view class="input_group"> 
				<view class="left_text-box">
					<text>手机号码</text>
				</view>
				<view class="right-input-box">
					<input type="number" :focus="focus.phone" placeholder="手机号码" v-model="address.phone" maxlength="11">
				</view>
			</view>
			<view class="input_group">
				<view class="left_text-box">
					<text>所在地区</text>
				</view>
				<view class="right-input-box">
					<picker mode='region' @change="chooseregion">
						<input type="text" id="area" placeholder="省、市、区" disabled="true" v-model="addressArea">
					</picker>
				</view>
			</view>
			<view class="input_group">
				<view class="left_text-box">
					<text>详细地址</text>
				</view>
				<view class="right-input-box">
					<textarea placeholder="小区楼栋/乡村名称" :focus="focus.detail" v-model="address.detail" maxlength="200"></textarea>
				</view>
			</view>
			<view class="set_default_address_group">
				<view class="text-tip_box">
					<text>设为默认收货地址</text>
				</view>
				<view class="check_group">
					<u-switch v-model="address.isDefault" activeColor="#ff7500" @change="getAddressDefaultChange"></u-switch>
				</view>
			</view>
			
			<view class="address_save_button_group">
				<view class="address_save_button_box" @click="getSaveAddress()">
					<text>保存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {
					realName: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					detail: '',
					isDefault: false,
				},
				addressArea: '',
				focus: {
					realName: false,
					phone: false,
					detail: false
				}
			};
		},
		onLoad(option) {
			this.getPageTitle(option.key, option.data);
		},
		methods: {
			// 更改页面标题
			getPageTitle(key, data) {
				if (key == 1) {
					uni.setNavigationBarTitle({
						title: '编辑收货地址'
					})
					this.address = JSON.parse(data);
					this.addressArea = this.address.province + " " + this.address.city + " " + this.address.district;
				} else {
					uni.setNavigationBarTitle({
						title: '添加收货地址'
					})
				}
			},
			// 设置为默认地址
			getAddressDefaultChange(e) {
				console.log('change', e);
			},
			// 省市区选择
			chooseregion(event){
				let address = event.detail.value.toString();
				var addressSlipt = address.split(',');
				this.address.province = addressSlipt[0];
				this.address.city = addressSlipt[1];
				this.address.district = addressSlipt[2];
				this.addressArea = address.replace(/,/g," ");
			},
			// 保存收货地址
			getSaveAddress() {
				let verifiryDataNotEmpty = this.getDataNotEmpty();
				let data = {
					address: {
						city: this.address.city,
						district: this.address.district,
						province: this.address.province
					},
					detail: this.address.detail,
					isDefault: this.address.isDefault,
					phone: this.address.phone,
					realName: this.address.realName
				}
				
				if (verifiryDataNotEmpty) {
					this.sendRequest({
						url: "/api/front/address/edit",
						data: data,
						method: 'post',
						success: res => {
							uni.showToast({
								icon:'none',
								title: '保存成功'
							})
							uni.redirectTo({
								url: '/pagesA/main/customerMyCenter/shippingAddress/shippingAddress' 
							})
						}
					})
				}
			},
			getDataNotEmpty() {
				let toastText;
				const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				var varfitry = false;
				if (!this.address.realName) {
					toastText = "收货人姓名不能为空";
					this.focus.realName = true;
					this.focus.phone = false;
					this.focus.detail = false;
				} else if (!this.address.phone) {
					toastText = "收货人电话不能为空"
					this.focus.phone = true;
				} else if (!reg.test(this.address.phone)) {
					toastText = "请输入正确的手机号码"
					this.focus.phone = true;
					this.focus.realName = false;
					this.focus.detail = false;
				}  else if (!this.addressArea && !this.address.city && !this.address.province && !this.address.district) {
					toastText = "省市区内容不能为空"
				} else if (!this.address.detail) {
					toastText = "详细地址不能为空"
					this.focus.detail = true
					this.focus.realName = false
					this.focus.phone = false
				} else {
					varfitry = true;
				}
					
				uni.showToast({
					icon: 'none',
					title: toastText 
				})
				
				return varfitry;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'addAddress.scss';
</style>
